body {
    background: #fff;
}

header {
    .header-top {
        display: flex;
        height: 50px;
        justify-content: space-between;
        background: #ff841d;
        .logo {
            width: 200px;
            background: url('../images/header_logo.png') no-repeat;
            background-size: 150px 24px;
            background-position: 10px 16px;
        }
        .uplode {
            width: 40px;
            background: url('../images/header_app.png') no-repeat;
            background-size: 30px 30px;
            background-position: 0 12px;
        }
    }
    .header-bottom {
        display: flex;
        height: 50px;
        padding: 0 10px;
        justify-content: center;
        align-items: center;
        .header-bottom-left{
            flex: 1;
            height: 30px;
            margin-right: 10px;
            input {
                width: 100%;
                line-height: 30px;
                font-size: 16px;
                border-radius: 15px;
                padding-left: 20px;
                background: #f1f1f1;
            }
        }
        .search {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 30px;
            font-size: 16px;
            color: #fff;
            border-radius: 15px;
            background: #ff841d;
        }
    }
}

// 轮播图部分
.lunbo{
    // overflow: hidden;
    ul{
        width: 1000%;
        li{
          float: left;
          width: 10%;  
        }
    }
}


// 空隙部分
.void {
    width: 100%;
    height: 10px;
    background-color: rgb(241, 241, 241);
}

// 商品导航部分
nav {
    // display: flex;
    width: 100%;
    ul {
        // display: flex;
        width: 100%;
        flex-wrap: wrap;
        li {
            display: flex;
            justify-content: center;
            float: left;
            width: 25%;
            padding: 5px 0;
            a {
                display: flex;
                flex-direction: column; // justify-content: center;
                align-items: center;
                img {
                    width: 50%;
                }
                span {
                    font-size: 14px;
                }
            }
        }
        li:nth-last-child(-n+4){
            display: none;
        }
    }
}

// 空隙部分
.voids {
    width: 100%;
    height: 5px;
    background-color: rgb(241, 241, 241);
}

// 商品部分
.commodity {
    background-color: rgb(242, 242, 242);
    .commodity-title {
        display: flex;
        height: 30px;
        font-size: 14px;
        justify-content: space-between;
        align-items: center;
        background-color: rgb(255, 132, 29);
        color: #fff;
        padding: 0 10px;
        img {
            width: 20px;
        }
    }
    .commodity-conten {
        max-width: 960px;
        margin: 0 auto;
        background-color: #fff;
        // width: 100%;
        ul {
            li {
                border:1px solid #ccc;
                a {
                    padding: 8px 10px;
                    height: 100px;
                    display: flex;
                    .imgs {
                        width: 100px;
                        margin-right: 20px;
                    }
                    .details{
                        width: 100%;
                        .details-name{
                            font-size: 14px;
                            p{
                                .price-r{
                                    color:rgb(255, 127, 33) ;
                                }
                            }   
                        }
                        .details-time{
                            margin-top: 10px;
                            display: flex;
                            font-size: 12px;
                            color: #ccc;
                            justify-content: space-between;
                        }
                    }
                }
            }
        }
    }
}

// 加载更多
.more{
    width: 100%;
    height: 40px;
    // background-color: aqua;
    padding: 5px 10px;
    .more-conten{
        // width: 100%;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        text-align: center;
        background-color: rgb(251, 251, 251);
        border: 1px solid #ccc;
    }
}

// 品牌排行
.ranking{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(255, 156, 28);
    color: #fff;
    padding: 5px 10px;
    a{
        width: 25px;
    }
}
// 底部部分
footer {
    background: #f1f1f1;
    .direct{
        display: flex;
        height: 40px;
        justify-content: center;
        a{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #dcdcdc;
        }
        .backTop{
            span{
                display:block;
                height: 15px;
                width: 15px;
                background: url("../images/top.jpg");
                background-size: 15px 15px;
            }
        }
    }
    .copyright{
        height: 60px;
        text-align: center;
        font-size: 14px;
        padding-top:10px;
        p{
            a{
                display: inline;
                color:red;
            }
            span{
                color:#727f86;
            }
        }
        >a{
            color: #727f86;
        }
    }
}